<template>
  <view>
    <NavBarVue :title="'我的关注和粉丝'"></NavBarVue>
    <div class="head">
      <div class="head_left" v-for="item in list" :key="item.id">
        <div v-if="item.title=='赞和收藏'" @click="toCollect"
             style="width: 50px;height: 50px;background: rgb(255, 223, 222);border-radius: 17px;display: flex;justify-content: center;align-items: center;">
          <span :class="['iconfont',item.icon]" style="color:rgb(253, 94, 91);font-size: 27px;"></span>
        </div>
        <div v-if="item.title=='新增关注'" @click="toNewAttention"
             style="width: 50px;height: 50px;background: rgb(215, 231, 255);border-radius: 17px;display: flex;justify-content: center;align-items: center;">
          <span :class="['iconfont',item.icon]" style="color:rgb(54, 134, 254);font-size: 27px;"></span>
        </div>
        <div v-if="item.title=='评论'" @click="toComment"
             style="width: 50px;height: 50px;background: rgb(214, 247, 234);border-radius: 17px;display: flex;justify-content: center;align-items: center;">
          <span :class="['iconfont',item.icon]" style="color:rgb(50, 217, 151);font-size: 27px;"></span>
        </div>
        <p style="margin-top: 10px;font-size: 15px;">{{item.title}}</p>
      </div>
    </div>
    <ul class="main">
      <li class="main_li" v-for="item in mainlist" :key="item.id">
        <BaseCoverImage :src="item.img" style="width: 40px;height: 40px;border-radius: 25px;"/>
        <div class="li_center"
             style="width: 240px;height: 55px;display: flex;flex-direction: column;justify-content:space-evenly;">
          <p style="font-size: 14px;">{{item.title}}</p>
          <div class="li_div">{{item.msg}}</div>
        </div>
        <div style="height: 40px;width: 60px;text-align: center;font-size: 14px;color: #aaa;">
          {{item.time}}
        </div>
      </li>
    </ul>
    <TabBarVue/>
  </view>
</template>

<script setup>
import {
  ref
} from 'vue'

const list = ref([{
  id: 1,
  title: '赞和收藏',
  icon: "icon-xiai",
},
  {
    id: 2,
    title: '新增关注',
    icon: "icon-morentouxiang",
  },
  {
    id: 3,
    title: '评论',
    icon: "icon-xiaoxi",
  },
])
const mainlist = ref([{
  id: 1,
  title: 'hi,小红书助手',
  msg: '小红书成长助手,的哈士奇今晚黑i去问啊快速导航七五恩情五i和',
  time: '07-18',
  img: '/static/images/1002.png'
},
  {
    id: 2,
    title: '小肥猪',
    msg: '多久吃饭呢',
    time: '07-18',
    img: '/static/images/1003.png'
  },
  {
    id: 3,
    title: '7月的风',
    msg: '你好，查收属于你的的日记',
    time: '07-18',
    img: '/static/images/1004.png'
  },
  {
    id: 4,
    title: '猫咪',
    msg: '该吃饭了',
    time: '07-18',
    img: '/static/images/1005.png'
  },
  {
    id: 5,
    title: '爱吃鱼的小A',
    msg: '大家一起嗨皮',
    time: '07-18',
    img: '/static/images/1006.png'
  },
])

const toCollect = () => {
  uni.navigateTo({
    url: '/pages/tab-mine/collect/index'
  })
}
const toNewAttention = () => {
  uni.navigateTo({
    url: '/pages/tab-mine/new-attention/index'
  })
}
const toComment = () => {
  uni.navigateTo({
    url: '/pages/tab-mine/comment/index'
  })
}
</script>

<style scoped>
.head {
  width: 100%;
  height: 130px;
  /* background: salmon; */
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}

.head_left {
  width: 100px;
  height: 100px;
  /* background: seagreen; */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.main {
  width: 90%;
  margin: 0 auto;
  /* background: salmon; */
  display: flex;
  flex-direction: column;
  justify-content: center;

}

.main_li {
  width: 100%;
  height: 70px;
  /* background: salmon; */
  /* margin-top: 10px; */
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}

.li_div {
  font-size: 12px;
  color: #aaa;
  white-space: nowrap;
  /*规定段落中的文本不进行换行*/
  overflow: hidden;
  /*内容会被修剪，并且其余内容是不可见的。*/
  text-overflow: ellipsis;
  /*显示省略号来代表被修剪的文本*/
}
</style>